<template>
  <div class="gridlist-demo-container">
    <mu-grid-list class="gridlist-demo" :cols="cols">
      <mu-sub-header v-if="activePath==='recommend'">{{title}} ></mu-sub-header>
      <mu-grid-tile v-for="item, index in list" :key="item.id" class="list" :style="{height: listHeight}">
        <img v-lazy="item.picUrl" v-if="activePath==='recommend'" @click="goToList(item)"/>
        <img v-lazy="item.coverImgUrl" v-if="activePath==='songList'" @click="goToList(item)"/>
        <span slot="title">{{item.name}}</span>
      </mu-grid-tile>
    </mu-grid-list>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
  export default{
    data () {
      return {}
    },
    props: {
      list: {
        type: Array
      },
      title: '',
      cols: Number,
      activePath: String,
      listHeight: String
    },
    methods: {
      goToList(item) {
        console.log(item)
        if (this.activePath === 'recommend') {
          this.$router.push({
            path: `/recommend/${item.id}`
          })
        } else if (this.activePath === 'songList') {
          this.$router.push({
            path: `/songList/${item.id}`
          })
        }
        this.setPlaylist(item)
      },
      ...mapMutations({
        setPlaylist: 'SET_PLAYLIST'
      })
    }
  }
</script>

<style>
  .mu-grid-list img {
    width: 100%;
    height: auto;
  }

  .gridListContainer .mu-grid-tile-titlebar {
    background: #fff;
  }

  .gridListContainer .mu-grid-tile-title {
    color: #000;
    font-size: 1rem;
  }

  .gridListContainer .mu-grid-tile-titlebar {
    align-items: left;
    position: inherit;
  }

  .gridListContainer .mu-grid-tile-subtitle, .mu-grid-tile-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .gridListContainer .mu-grid-tile-title-container {
    margin-left: 0;
  }
</style>
